<!-- 司机详情 -->
<template>
  <div class="dashboard-container driver-detail">
    <div class="driver-detail-box">
      <el-card class="box-card">
        <!-- 表头切换 -->
        <div class="aside-box">
          <div class="el-aside">
            <span
              class="aside-item"
              :class="{active:flag}"
              style="margin-right:50px"
              @click="flag=true"
            >基本信息</span>
            <span
              class="aside-item"
              :class="{active:!flag}"
              @click="driverFn"
            >驾驶证信息</span>
          </div>
        </div>
        <div class="my-form">
          <el-form
            v-show="flag"
            label-position="left"
            :inline="true"
            class="demo-form-inline"
          >
            <div class="form-content">
              <el-row
                class="span-margin"
                type="flex"
              >
                <el-col :span="8">
                  <span
                    v-show="!baseForm.editFlag"
                  >员工编号：<span
                    class="noDrop"
                  >{{ driverDetailInfo.userId }}</span></span>
                  <el-form-item
                    v-show="baseForm.editFlag"
                    label="员工编号:"
                  >
                    <el-input
                      v-model="form.userId"
                      disabled
                      placeholder="员工编号"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col
                  :span="8"
                >
                  <span v-show="!baseForm.editFlag">司机名称：<span class="noDrop">{{ driverDetailInfo.name }}</span></span>
                  <el-form-item
                    v-show="baseForm.editFlag"
                    label="司机名称:"
                  >
                    <el-input
                      v-model="form.name"
                      disabled
                      placeholder="司机名称"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <span v-show="!baseForm.editFlag">所需机构：<span class="noDrop">东北野战军机构</span></span>
                  <el-form-item
                    v-show="baseForm.editFlag"
                    label="所需机构:"
                  >
                    <el-input
                      v-model="form.agency"
                      disabled
                      placeholder="所需机构"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row
                :class="{span_margin:baseForm.editFlag===false}"
                type="flex"
              >
                <el-col :span="8">
                  <span v-show="!baseForm.editFlag">电话：<span class="noDrop">{{ driverDetailInfo.mobile }}</span></span>
                  <el-form-item
                    v-show="baseForm.editFlag"
                    label-width="73px"
                    label="电话:"
                  >
                    <el-input
                      v-model="form.mobile"
                      disabled
                      placeholder="电话"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <span v-show="!baseForm.editFlag">年龄：<span class="noDrop">{{ driverDetailInfo.age }}</span></span>
                  <el-form-item
                    v-show="baseForm.editFlag"
                    label-width="73px"
                    label="年龄:"
                  >
                    <el-input
                      v-model="form.age"
                      placeholder="年龄"
                    ></el-input>
                  </el-form-item>
                </el-col>

              </el-row>
            </div>

            <div class="form-bottom">
              <el-row
                :span="12"
                type="flex"
                justify="center"
              >
                <el-form-item>
                  <div v-show="baseForm.editFlag">
                    <el-button
                      type="primary"
                      @click="SaveFn"
                    >保存</el-button>
                    <el-button @click="baseForm.editFlag=false">取消</el-button>
                  </div>
                  <el-button
                    v-show="!baseForm.editFlag"
                    type="primary"
                    @click="editFormFn1"
                  >
                    编辑
                  </el-button>
                </el-form-item>
              </el-row>
            </div>

          </el-form>
          <!-- 第二个form -->
          <el-form
            v-show="!flag"
            :inline="true"
            label-position="left"
            label-width="80px"
            class="demo-form-inline"
          >
            <div class="form-content">
              <div class="form-content">
                <el-row
                  class="span-margin"
                  type="flex"
                >
                  <el-col :span="8">
                    <span
                      v-show="!baseForm2.editFlag"
                    >驾驶证号：<span
                      class="noDrop"
                    >{{ driverLicenseDetailInfo.licenseNumber||'----' }}</span></span>
                    <el-form-item
                      v-show="baseForm2.editFlag"
                      label="驾驶证号:"
                    >
                      <el-input
                        v-model="form2.licenseNumber"

                        placeholder="驾驶证号"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col
                    :span="8"
                  >
                    <span v-show="!baseForm2.editFlag">准驾车型：<span class="noDrop">{{ driverLicenseDetailInfo.allowableType||'----' }}</span></span>
                    <el-form-item
                      v-show="baseForm2.editFlag"
                      label="准驾车型:"
                    >
                      <el-input
                        v-model="form2.allowableType"

                        placeholder="准驾车型"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <span v-show="!baseForm2.editFlag">初领日期：<span class="noDrop">{{ driverLicenseDetailInfo.initialCertificateDate||'----' }}</span></span>
                    <el-form-item
                      v-show="baseForm2.editFlag"
                      label-width="100px"
                      label="初次领证日期:"
                    >
                      <el-date-picker
                        v-model="form2.initialCertificateDate"
                        type="date"
                        placeholder="请选择注册时间"
                        value-format="yyyy-MM-dd"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row
                  :class="{span_margin:baseForm2.editFlag===false}"
                  type="flex"
                >
                  <el-col :span="8">
                    <span v-show="!baseForm2.editFlag">驾驶证有效期限：
                      <span class="noDrop">{{ driverLicenseDetailInfo.validPeriod ||'----' }}</span><span class="yearStyle">年</span></span>
                    <el-form-item
                      v-show="baseForm2.editFlag"
                      label-width="120px"
                      label="驾驶证有效期限:"
                    >
                      <el-input
                        v-model="form2.validPeriod"

                        placeholder="驾驶证有效期限"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <span v-show="!baseForm2.editFlag">驾龄：
                      <span class="noDrop">{{ driverLicenseDetailInfo.driverAge||'----' }}</span><span class="yearStyle">年</span></span>
                    <el-form-item
                      v-show="baseForm2.editFlag"

                      label="驾龄:"
                    >
                      <el-input
                        v-model.number="form2.driverAge"
                        placeholder="驾龄"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <span v-show="!baseForm2.editFlag">驾驶证类型：<span class="noDrop">{{ driverLicenseDetailInfo.licenseType||'----' }}</span></span>
                    <el-form-item
                      v-show="baseForm2.editFlag"
                      label-width="100px"
                      label="驾驶证类型:"
                    >
                      <el-input
                        v-model="form2.licenseType"
                        placeholder="驾驶证类型"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <span v-show="!baseForm2.editFlag">从业资格证：<span class="noDrop">{{ driverLicenseDetailInfo.qualificationCertificate||'----' }}</span></span>
                    <el-form-item
                      v-show="baseForm2.editFlag"
                      label-width="100px"
                      label="从业资格证:"
                    >
                      <el-input
                        v-model="form2.qualificationCertificate"
                        placeholder="从业资格证"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <span v-show="!baseForm2.editFlag">入场证信息：<span class="noDrop">{{ driverLicenseDetailInfo.passCertificate||'----' }}</span></span>
                    <el-form-item
                      v-show="baseForm2.editFlag"
                      label-width="90px"
                      label="入场证信息:"
                    >
                      <el-input
                        v-model="form2.passCertificate"
                        placeholder="入场证信息"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="my-picture">
                  <el-form-item label="图片信息">
                    <el-upload
                      v-show="baseForm2.editFlag===false"
                      :file-list="uploadData.fileList"
                      action="#"
                      list-type="picture-card"
                      class="my-upload-prview"
                    >

                      <div
                        slot="file"
                        slot-scope="{file}"
                      >
                        <img
                          class="el-upload-list__item-thumbnail"
                          :src="file.url"
                          alt=""
                        >
                        <span class="el-upload-list__item-actions">
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                          >
                            <i class="el-icon-zoom-in"></i>
                          </span>

                        </span>
                      </div>
                    </el-upload>
                    <el-upload
                      v-show="baseForm2.editFlag===true"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      list-type="picture-card"
                      :file-list="uploadData.fileList"
                      :http-request="uploadHandle"
                      :on-remove="handleRemove"
                    >
                      <i
                        slot="default"
                        class="el-icon-plus"
                      ></i>
                      <div
                        slot="file"
                        slot-scope="{file}"
                      >
                        <img
                          class="el-upload-list__item-thumbnail"
                          :src="file.url"
                          alt=""
                        >
                        <span class="el-upload-list__item-actions">
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                          >
                            <i class="el-icon-zoom-in"></i>
                          </span>
                          <span
                            v-if="!uploadData.disabled"
                            class="el-upload-list__item-delete"
                            @click="handleRemove(file)"
                          >
                            <i class="el-icon-delete"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>
                  </el-form-item>

                  <el-dialog :visible.sync="uploadData.dialogVisible">
                    <img
                      width="100%"
                      :src="uploadData.dialogImageUrl"
                      alt=""
                    >
                  </el-dialog>
                </el-row>
              </div>
            </div>
            <el-row
              :span="12"
              type="flex"
              justify="center"
            >
              <div
                class="my-button"
              >
                <div v-show="baseForm2.editFlag">
                  <el-button
                    type="primary"
                    @click="driverLicenseSave"
                  >保存</el-button>
                  <el-button @click="baseForm2.editFlag=false">取消</el-button>
                </div>
                <el-button
                  v-show="!baseForm2.editFlag"
                  type="primary"
                  @click="baseForm2.editFlag=true"
                >编辑</el-button>
              </div>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { driverDetail, driverDetailUpdate, imgUpload, driverLicenseDetail, driverLicenseDetailUpdate } from '@/api/transit'
export default {
  data() {
    return {

      flag: true,
      baseForm: {
        editFlag: false
      },
      baseForm2: {
        editFlag: false
      },
      form: {
        userId: '',
        name: '',
        avatar: '',
        mobile: '',
        age: '',
        workNumber: '',
        workStatus: '',
        agency: ''
      },
      // 详情数据
      driverDetailInfo: {},
      // 驾照详情
      driverLicenseDetailInfo: {},
      // 图片
      uploadData: {
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        fileList: [{ url: 'https://img.zcool.cn/community/0126ce5bcd831da8012099c8f0feac.jpg@1280w_1l_2o_100sh.jpg' }, { url: 'https://img.zcool.cn/community/0126ce5bcd831da8012099c8f0feac.jpg@1280w_1l_2o_100sh.jpg' }]
        // fileList: []
      },
      form2: {
        allowableType: '', // 准驾车型
        driverAge: null, // 驾龄
        id: null,
        initialCertificateDate: '', // 初次领证日期
        licenseNumber: '', // 驾驶证号
        licenseType: '', // 驾驶证类型
        passCertificate: '', // 入场证信息
        picture: '', // 图片
        qualificationCertificate: '', // 从业资格证信息
        userId: null, // 司机id
        validPeriod: ''// 有效期限
      },
      // 图片地址
      imageUrl: ''
    }
  },
  computed: {
    id() {
      return this.$route.query.id
    }
  },
  created() {
    this.getdriverDetail()
  },
  methods: {
    async getdriverDetail() {
      const res = await driverDetail(this.id)
      console.log('我是详情', res)
      this.driverDetailInfo = res.data
    },
    async driverLicenseDetail() {
      const res = await driverLicenseDetail(this.id)
      console.log('****', this.id)
      console.log('我是驾驶证详情', res)
      this.driverLicenseDetailInfo = res.data
      console.log(this.driverLicenseDetailInfo.id)
      this.form2.id = this.driverLicenseDetailInfo.id
      this.form2.userId = this.id
      this.form2.picture = this.driverLicenseDetailInfo.picture
      const myArr = res.data.picture
      let uploadDataNew = null
      if (myArr === null) {
        uploadDataNew = [{ url: 'https://img.zcool.cn/community/0126ce5bcd831da8012099c8f0feac.jpg@1280w_1l_2o_100sh.jpg' }, { url: 'https://img.zcool.cn/community/0126ce5bcd831da8012099c8f0feac.jpg@1280w_1l_2o_100sh.jpg' }]
      } else {
        uploadDataNew = myArr.split(',').map(item => {
          return { url: item }
        })
        this.uploadData.fileList = uploadDataNew

      // console.log(uploadDataNew)
      }
    },
    driverFn() {
      this.flag = false
      // 获取司机驾驶证信息
      this.driverLicenseDetail()
    },
    editFormFn1() {
      this.baseForm.editFlag = true
      this.form = {
        userId: this.driverDetailInfo.userId,
        name: this.driverDetailInfo.name,
        avatar: this.driverDetailInfo.picture,
        mobile: this.driverDetailInfo.mobile,
        age: this.driverDetailInfo.age,
        workNumber: this.driverDetailInfo.account,
        workStatus: this.driverDetailInfo.workStatus,
        agency: this.driverDetailInfo.agency.name
      }
    },
    async SaveFn() {
      await driverDetailUpdate(this.id, this.form)
      this.$message.success('修改成功')
      this.baseForm.editFlag = false
      this.getdriverDetail()
    },
    // 图片预览
    handlePictureCardPreview(file) {
      console.log('我是预览', file)
      this.uploadData.dialogImageUrl = file.url
      this.uploadData.dialogVisible = true
    },
    // 添加图片的上传
    async uploadHandle(fileData) {
      console.log('我是上传的文件信息', fileData)
      // 1. 处理FormData
      const { file } = fileData
      const formData = new FormData()
      formData.append('file', file)
      formData.append('type', 'contract')
      // 2. 上传并赋值
      const res = await imgUpload(formData)
      console.log('我是上传成功的信息', res)
      // 提取图片地址
      const Mypicture = res.data
      console.log(Mypicture)
      this.uploadData.fileList.push({ name: file.name, url: Mypicture })
      console.log(this.uploadData.fileList)
      this.transPicture()
    },
    // 处理图片
    transPicture() {
      const newFileList = this.uploadData.fileList.map(item => {
        return item.url
      })
      console.log(newFileList.join(','))
      this.form2.picture = newFileList.join(',')
    },
    // 图片移除
    handleRemove(file) {
      console.log('我是移除的信息', file)
      this.uploadData.fileList.forEach((item, index) => {
        if (item.url === file.url) {
          this.uploadData.fileList.splice(index, 1)
          this.transPicture()
        }
      })
    },
    // 更新司机驾驶证信息
    async driverLicenseSave() {
      const res = await driverLicenseDetailUpdate(this.form2)
      console.log('更新司机驾驶证', res)
      this.baseForm2.editFlag = false
      this.driverLicenseDetail()
    }

  }

}
</script>
<style lang="scss" scoped>
::v-deep .my-upload-prview .el-upload--picture-card{
  display: none;
}
.my-picture{
  margin-top: 30px;
}
.yearStyle{
  display: inline-block;
  margin-left: 20px;
}
.noDrop{
  cursor: no-drop;
}
.span_margin{
  margin: 20px 0
}
.box-card{
  height: 600px;
}
.form-content{
  height: 400px;
}
.my-bottom{
  display: flex;
  align-content: right;
}
::v-deep .el-form-item__label{
  font-weight: 400;
}
.driver-detail-box{
  padding: 20px;
}
.my-form{
  padding: 16px 26px;
}
.active {
  color: #ff643d;
}
</style>

<style lang="scss" scoped>
.driver-detail {
    ::v-deep .el-container{
    flex-direction: column;
    margin-left: 0px;

  }
  .in{
    height: calc(100vh - 205px);
  }
  .aside-box {
    background: #ffffff;
    border-radius: 4px;
    padding: 24px 37px 24px 37px;
    box-sizing: border-box;
    ::v-deep .el-aside {
      padding-bottom: 14px;
      width: 100%!important;
      display: flex;
      background-color: #ffffff;
      border-bottom:1px solid #E5E7EC ;
      text-align: left;
      font-size: 14px;
      .aside-item {
        cursor: pointer;
        &:first-child {
          margin-right: 53px;
          padding-left: 25px;

        }
      }
      .aside-item.active{
        font-size: 16px;
        font-weight: bold;
        color: #20232A;
        &:after{
          content: '';
          display: block;
          background-color:#E15536 ;
          height: 3px;
          width: 49px;
          margin: 0 auto;
          position: relative;
          top: 14px;
        }
      }
    }
  }
}
</style>
